<template>
  <m-page>
    <template #head>
      <m-navbar :title="title" />
    </template>

    <div>
      <span @click="selectCateId">点我选择分类</span>
    </div>

    <div>
      <span @click="selectGender">点我选择性别</span>
    </div>

    <div>
      <span @click="selectArea">点我选择地区</span>
    </div>
    <m-picker v-model:show="modelGender" v-model:value="gender" title="选择性别" :data="genderOpts" />
    <m-select v-model:show="modelCate" v-model:value="cateId" title="选择分类" :data="options" />
    <m-area v-model:show="modelArea" v-model:value="cityIds" title="选择地区" @change="cascaderSelect" />
  </m-page>
</template>
<script setup>
import { ref, watch } from "vue"
import { getKeyOfData } from '@/utils'

const title = ref("UI类库")
const areaOpts = ref([])
const options = ref([])
const cateId = ref([2])
const cityIds = ref([{
  code: "130000",
  first_letter: "H",
  name: "河北省",
  pinyin: "hebeisheng",
  type: 0,
  zip_code: "0",
  _id: "6349315790a11e0001376461"
}])
const gender = ref(null)
const modelCate = ref(false)
const modelGender = ref(false)
const modelArea = ref(false)
const genderOpts = ref([])

genderOpts.value = [
  { text: '男', value: 1 },
  { text: '女', value: 2 },
]

options.value = [
  { label: '未婚', value: 1 },
  { label: '已婚', value: 2 },
  { label: '离异', value: 3 },
  { label: '丧偶', value: 4 },
]

const selectCateId = () => {
  modelCate.value = true
}
const selectGender = () => {
  modelGender.value = true
}
const selectArea = async () => {
  modelArea.value = true
}

const headers = useRequestHeaders(['cookie'])


const cascaderSelect = async ({ value, tabIndex, selectedOptions }) => {
  console.log(value, tabIndex, selectedOptions, '+')
  if (tabIndex < 2) {
    // const { data } = await useFetch('/api/common/getCities', { params: { code: value } })
    // selectedOptions[tabIndex].children = data.value.data
  }
}

watch(cityIds, (nVal) => {
  // console.log(nVal, 'cityIds')
}, { deep: true })

useHead({
  title,
  meta: [
    { name: "description", content: "" },
    { name: "keywords", content: "" },
  ],
});
</script>
